import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
const pathSrc = path.resolve(__dirname, 'src')
// import importToCDN from 'vite-plugin-cdn-import'
import { visualizer } from 'rollup-plugin-visualizer'
// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `js/[name]-[hash].js`,
        chunkFileNames: `js/[name]-[hash].js`,
        assetFileNames: `[ext]/[name]-[hash].[ext]`,
        // 最小化拆分包
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }
      }
    }
  },
  plugins: [
    vue(),
    visualizer({
      emitFile: true,
      open: true,
      filename: 'stats.html'
    }),
    // importToCDN({
    //   modules: [
    //     {
    //       name: 'vue',
    //       var: 'Vue',
    //       path: 'https://unpkg.com/vue@next'
    //     },
    //     {
    //       name: 'vue-router',
    //       var: 'VueRouter',
    //       path: 'https://unpkg.com/vue-router@4'
    //     },
    //     {
    //       name: 'vuex',
    //       var: 'Vuex',
    //       path: 'https://unpkg.com/vuex@4'
    //     }
    //   ]
    // }),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(pathSrc, 'assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    host: '0.0.0.0'
  },
  css: {
    // CSS 预处理器
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: `
            @use "@/styles/variables.scss" as *;
          `
      }
    }
  }
})
